<div class="row">
	<div class="col-md-12">
		<h1>Gói sản phẩm <small>Danh sách các gói sản phẩm</small></h1>
		<ol class="breadcrumb">
            <li><a href="<?php echo mns_page_url(); ?>"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active"><i class="fa fa-table"></i> Các gói sản phẩm hiện có</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-xs-12">
        <form class="form-inline" role="form" method="post" action="<?php echo mns_page_url(PRODUCT_PACKET_SLUG.'/buy'); ?>" data-callback=1>
            <div class="form-group">Chọn gói sản phẩm</div>
            <div class="form-group">
                <select class="form-control" id="packet-list" name='packet[packet_id]'>
                <?php foreach ($aAvailablePacket as $key => $value) { ?>
                    <option value="<?php echo $value->getId(); ?>"
                        data-value="<?php echo $value->getProductCount(); ?>"
                        data-text="<?php echo $value->getTitle(); ?>">
                        <?php echo $value->getTitle(); ?>
                        ---
                        <?php echo currency_format($value->getPrice()); ?>
                    </option>
                <?php } ?>
                </select>
            </div>
            <button type="button" class="btn btn-primary btn-submit-update"><i class='glyphicon glyphicon-shopping-cart'></i> Mua</button>
        </form>
    </div>
    <div class="clearfix"></div>

    <div class="col-md-12 mgt10">
        <div class="table-responsive">
            <table id="tbpacket" class="table table-bordered table-hover tablesorter item-list">
                <thead>
                    <tr>
                        <th class="header"># <i class="fa fa-sort"></i></th>
                        <th class="header">Gói sản phẩm <i class="fa fa-sort"></i></th>
                        <th class="header">Số lượng <i class="fa fa-sort"></i></th>
                        <th class="header">Đã sử dụng <i class="fa fa-sort"></i></th>
                        <th class="header">Tải lần gần nhất <i class="fa fa-sort"></i></th>
                        <th class="header">Mua ngày <i class="fa fa-sort"></i></th>
                    </tr>
                    <tr class="tr-temp hidden warning">
                        <th class="header bg-info index"></th>
                        <th class="header title"></th>
                        <th class="header product-count"></th>
                        <td class="upload-time">0</td>
                        <td class="updated-at"></td>
                        <td class="created-at"></td>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($aPacket as $index=>$packet) { ?>
                    <?php
                        $trClass = '';
                        if($packet->getUploadTime() == 0){ $trClass = 'success'; }
                        if($packet->getUploadTime() >= $packet->product_count){ $trClass = 'danger'; }
                        if($packet->getActiveFlg() == 0){ $trClass = 'warning'; }
                    ?>
                    <tr class="<?php echo $trClass; ?>">
                        <th class="header bg-info"><?php echo $index+1; ?></th>
                        <th class="header"><?php echo $packet->title; ?></th>
                        <th class="header"><?php echo $packet->product_count; ?></th>
                        <td><?php echo $packet->getUploadTime(); ?></td>
                        <td><?php echo $packet->getUpdatedAt(); ?></td>
                        <td><?php echo $packet->getCreatedAt(); ?></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="text-center">FREE Package</h4>
            </div>
            <div class="panel-body text-center">
                <p class="lead">
                    <strong>$10 / month</strong>
                </p>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item">
                    Personal Use
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Single Commercial License
                    <span class="glyphicon glyphicon-remove pull-right"></span>
                </li>
                <li class="list-group-item">
                    Multiple site Commercial license
                    <span class="glyphicon glyphicon-remove pull-right"></span>
                </li>
                <li class="list-group-item">
                    Technical Support
                    <span class="glyphicon glyphicon-remove pull-right"></span>
                </li>
            </ul>
            <div class="panel-footer">
                <a class="btn btn-lg btn-block btn-success">Download</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="text-center">Standard commercial package</h4>
            </div>
            <div class="panel-body text-center">
                <p class="lead">
                    <strong>$10 / month</strong>
                </p>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item">
                    Personal Use
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Single Commercial License
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Multiple site Commercial license
                    <span class="glyphicon glyphicon-remove pull-right"></span>
                </li>
                <li class="list-group-item">
                    Technical Support
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
            </ul>
            <div class="panel-footer">
                <a class="btn btn-lg btn-block btn-info">Purchase</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="text-center">Premium commercial package</h4>
            </div>
            <div class="panel-body text-center">
                <p class="lead">
                    <strong>$10 / month</strong>
                </p>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item">
                    Personal Use
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Single Commercial License
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Multiple site Commercial license
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
                <li class="list-group-item">
                    Technical Support
                    <span class="glyphicon glyphicon-ok pull-right"></span>
                </li>
            </ul>
            <div class="panel-footer">
                <a class="btn btn-lg btn-block btn-primary">Purchase</a>
            </div>
        </div>
    </div>
</div>